<script setup lang="ts">
import { reqHospitalInfo } from '@/apis/home';
import { Search } from '@element-plus/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const hosname = ref<string>('')
const $router = useRouter()

const fetchData = async (keyword: string, cb: any) => {
  const res = await reqHospitalInfo(keyword)
  const showData = res.data.map(item => {
    return {
      value:item.hosname,
      hoscode:item.hoscode
    }
  })
  console.log(res);
  cb(showData)
}

const goDetail = (item:any) => {
  // 点击跳转
  $router.push({path:'/hospital/register', query:{hoscode:item.hoscode}})
}

</script>

 <script lang="ts">
 export default {
  name:'Search'
 }
</script>

<template>
  <div class="search">
    <div>
      <el-autocomplete
        @select="goDetail"
        clearable
        :trigger-on-focus="false"
        v-model="hosname"
        placeholder="请输入医院名称"
        :fetch-suggestions="fetchData"
      />
    </div>
      <el-button type="primary" size="default" :icon="Search" style="width: 60px;"> 搜索</el-button>
  </div>
</template>



<style scoped lang="scss">
.search{
  width: 100%;
  height: 50px;
  // background: red;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0px;
  
  // 深度选择器
  :deep(.el-input__wrapper){
    width: 600px;
    margin-right: 10px;
  }
  
}
</style>